<template>
	
	<view class="container" @touchmove.stop.prevent="">
		<view class="status_bar">
		        <!-- 这里是状态栏 -->
		</view>
		<ygc-comment ref="ygcComment"
		    :placeholder="'发布评论'" 
		    @pubComment="pubComment"></ygc-comment>
		<view class="page-nav">
			<view class="nav-left">
				<view class="backBtn" @click="backLastPage()">
					<image src="../../static/images/arrow-left.png" ></image>
				</view>
				<view class="authorInfo">
					<view class="authorProfilePicture">
						<image src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" mode="scaleToFill"></image>
					</view>
					<view class="authorText">
						<view class="authorName">
							<text>test</text>
						</view>
						<view class="authorMotto">
							<text>main</text>
						</view>
					</view>
				</view>
				
			</view>
			<view class="nav-right">
				<view class="follow-btn">
					<button type="default" plain="true" size="mini">关注</button>
				</view>
			</view>
			
		</view>
		<view class="page-body">
			
			<view class='wrapper'>
				
				<view class='toolbar' v-show="false" @tap="format" style="height: 120px;overflow-y: auto;">
					<view :class="formats.bold ? 'ql-active' : ''" class="iconfont icon-zitijiacu" data-name="bold"></view>
					<view :class="formats.italic ? 'ql-active' : ''" class="iconfont icon-zitixieti" data-name="italic"></view>
					<view :class="formats.underline ? 'ql-active' : ''" class="iconfont icon-zitixiahuaxian" data-name="underline"></view>
					<view :class="formats.strike ? 'ql-active' : ''" class="iconfont icon-zitishanchuxian" data-name="strike"></view>
					<view :class="formats.align === 'left' ? 'ql-active' : ''" class="iconfont icon-zuoduiqi" data-name="align"
					 data-value="left"></view>
					<view :class="formats.align === 'center' ? 'ql-active' : ''" class="iconfont icon-juzhongduiqi" data-name="align"
					 data-value="center"></view>
					<view :class="formats.align === 'right' ? 'ql-active' : ''" class="iconfont icon-youduiqi" data-name="align"
					 data-value="right"></view>
					<view :class="formats.align === 'justify' ? 'ql-active' : ''" class="iconfont icon-zuoyouduiqi" data-name="align"
					 data-value="justify"></view>
					<view :class="formats.lineHeight ? 'ql-active' : ''" class="iconfont icon-line-height" data-name="lineHeight"
					 data-value="2"></view>
					<view :class="formats.letterSpacing ? 'ql-active' : ''" class="iconfont icon-Character-Spacing" data-name="letterSpacing"
					 data-value="2em"></view>
					<view :class="formats.marginTop ? 'ql-active' : ''" class="iconfont icon-722bianjiqi_duanqianju" data-name="marginTop"
					 data-value="20px"></view>
					<view :class="formats.previewarginBottom ? 'ql-active' : ''" class="iconfont icon-723bianjiqi_duanhouju" data-name="marginBottom"
					 data-value="20px"></view>
					<view class="iconfont icon-clearedformat" @tap="removeFormat"></view>
					<view :class="formats.fontFamily ? 'ql-active' : ''" class="iconfont icon-font" data-name="fontFamily" data-value="Pacifico"></view>
					<view :class="formats.fontSize === '24px' ? 'ql-active' : ''" class="iconfont icon-fontsize" data-name="fontSize"
					 data-value="24px"></view>

					<view :class="formats.color === '#0000ff' ? 'ql-active' : ''" class="iconfont icon-text_color" data-name="color"
					 data-value="#0000ff"></view>
					<view :class="formats.backgroundColor === '#00ff00' ? 'ql-active' : ''" class="iconfont icon-fontbgcolor"
					 data-name="backgroundColor" data-value="#00ff00"></view>

					<view class="iconfont icon-date" @tap="insertDate"></view>
					<view class="iconfont icon--checklist" data-name="list" data-value="check"></view>
					<view :class="formats.list === 'ordered' ? 'ql-active' : ''" class="iconfont icon-youxupailie" data-name="list"
					 data-value="ordered"></view>
					<view :class="formats.list === 'bullet' ? 'ql-active' : ''" class="iconfont icon-wuxupailie" data-name="list"
					 data-value="bullet"></view>
					<view class="iconfont icon-undo" @tap="undo"></view>
					<view class="iconfont icon-redo" @tap="redo"></view>

					<view class="iconfont icon-outdent" data-name="indent" data-value="-1"></view>
					<view class="iconfont icon-indent" data-name="indent" data-value="+1"></view>
					<view class="iconfont icon-fengexian" @tap="insertDivider"></view>
					<view class="iconfont icon-charutupian" @tap="insertImage"></view>
					<view :class="formats.header === 1 ? 'ql-active' : ''" class="iconfont icon-format-header-1" data-name="header"
					 :data-value="1"></view>
					<view :class="formats.script === 'sub' ? 'ql-active' : ''" class="iconfont icon-zitixiabiao" data-name="script"
					 data-value="sub"></view>
					<view :class="formats.script === 'super' ? 'ql-active' : ''" class="iconfont icon-zitishangbiao" data-name="script"
					 data-value="super"></view>
					<view class="iconfont icon-shanchu" @tap="clear"></view>
					<view :class="formats.direction === 'rtl' ? 'ql-active' : ''" class="iconfont icon-direction-rtl" data-name="direction"
					 data-value="rtl"></view>

				</view>

				<view class="editor-wrapper">
					<editor id="editor" class="ql-container"  read-only="true"
					 @statuschange="onStatusChange"  @ready="onEditorReady" @blur="onEditorReady">
					 
					</editor>
				
				</view>
				<view class="text">
					<text>发布于</text>
				</view>
				<view class="user-active">
					<view class="acitve-item" @click="like()">
						<view class="img-box" :class="isLike==true?'like-active':''">
							<image :src="isLike==true?'../../static/images/liked.png':'../../static/images/like.png'" mode="widthFix"></image>
						</view>
						<view class="text-box">
							<text>{{likeNumber}}</text>
						</view>
						
					</view>
					<view class="acitve-item" @click="dislike()">
						<view class="img-box" :class="isDisLike==true?'dislike-active':''">
							<image :src="isDisLike==true?'../../static/images/disliked.png':'../../static/images/dislike.png'" mode="widthFix"></image>
						
						</view>
						<view class="text-box">
							<text>{{disLikeNumber}}</text>
						</view>
							
					</view>
					<view class="acitve-item" @click="collection()">
						<view class="img-box" :class="isCollction==true?'collection-active':''">
							<image :src="isCollction==true?'../../static/images/collectioned.png':'../../static/images/collection.png'" mode="widthFix"></image>
						</view>
						<view class="text-box">
							<text>{{collectionNumber}}</text>
						</view>
						
					</view>
					<view class="acitve-item" @click="share()">
						<view class="img-box" :class="isForward==true?'share-active':''">
							<image :src="isForward==true?'../../static/images/shared.png':'../../static/images/share.png'" mode="widthFix"></image>
						</view>
						
						<view class="text-box">
							<text>{{forwardingNum}}</text>
						</view>
						
					</view>
				</view>
				
				<view class="comments-box">
					<view class="comments-box-content">
						
						
						<view class="comments-text">
							<text>评论</text>
						</view>
						
						<view class="comments-user">
							<view class="conments-userImg">
								<view class="userImg-content">
									<image src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" mode="widthFix"></image>
								</view>
							</view>
							<view class="comments-click" @click="toggleMask('show')">
								<view class="comment-click-content">
									<text>说点什么...</text>
								</view>
							</view>
						</view>
						
						
						<view class="comments-list">
							<view class="comments-list-item" v-for="(item,index) in commentList" :key="index">
								<view class="item-userImg">
									<view class="userImg-box">
										<image src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" mode="widthFix"></image>
									</view>
								</view>
								<view class="item-content">
									<view class="item-userInfo">
										<view class="item-userInfo-userName">
											<view class="userName">
												<text>{{item.user_name}}</text>
											</view>
											
											<view class="userType" v-if="item.userType==1">
												<view class="userType-content" v-if="item.userType">
													<text>作者</text>
												</view>
											</view>
										</view>
										<view class="item-userInfo-like">
											<view class="img-box" @click="commentsLike(index)">
												<view class="" :class="item.vote_up_Type==true?'like-active':''">
													<image :src="item.vote_up_Type==true?'../../static/images/liked.png':'../../static/images/like.png'" mode="widthFix"></image>
												</view>
												
												<view class="image-like-num" style="font-size: 20rpx;text-align: center;">
													<text>{{item.vote_up_count}}</text>
												</view>
											</view>
										</view>
									</view>
									<view class="item-userText" >
										<text>{{item.content}}</text>
									</view>
									<view class="item-send-time">
										<text>{{item.create_time}}</text>
									</view>
									
									<view class="item-user-children" v-for="(child,childindex) in item.children" :key="childindex" style="width: 100%;display: flex;margin-top: 10rpx;">
										<view class="userImg-box" style="width: 9%;">
											<view class="img-content" style="height: 55rpx; width:55rpx;border-radius: 50%;overflow:hidden;">
												<image src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" mode="widthFix"></image>
											</view>
										</view>
										
										<view class="item-children-content" style="width: 90%;margin-left: 20rpx;">
											<view class="user-children">
												<view class="children-userinfo" style="display: flex;justify-content: space-between;">
													
													
													<view class="" style="display: flex;color: rgb(157, 157, 157);font-weight: 600;">
														<view class="userName" style="font-size: 25rpx;">
															<text>{{child.user_name}}</text>
														</view>
														
														<view class="children-userType" style="height: 30rpx; font-size:1rpx;margin-left: 10rpx;background-color: rgb(245, 245, 245);" >
															<view class="userType-content" v-if="child.userType" style="">
																<text>作者</text>
															</view>
														</view>
													</view>
													
													
													<view class="children-like" style="height: 20rpx;width: 10%;display: flex;justify-content: center;">
														<view class="like-img-box" style="width: 60%;margin-left: 15rpx;">
															<view class="" :class="child.vote_up_Type==true?'like-active':''">
																<image :src="child.vote_up_Type==true?'../../static/images/liked.png':'../../static/images/like.png'" mode="widthFix"></image>
															</view>
															
															<view class="image-like-num" style="font-size: 20rpx;text-align: center;" @click="commentsChildLike(index,childindex)">
																<text>{{child.vote_up_count}}</text>
															</view>
														</view>
													</view>
													
												</view>
												
												<view class="children-Text item-userText" style="font-size: 20rpx;">
													<text>{{child.content}}</text>
												</view>
												
												<view class="children-time" style="font-size:20rpx; color: rgb(157, 157, 157);margin-top: 9rpx;">
													<text>{{child.create_time}}</text>
												</view>
												
											</view>
										</view>
									</view>
								</view>
								
								
								
							</view>
						</view>
						
						
					</view>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				readOnly: false,
				formats: {},
				articlAllInfo:{},
				iStatusBarHeight:0,
				collectionNumber:0,
				likeNumber:0,
				disLikeNumber:0,
				forwardingNum:0,
				isLike:false,
				isDisLike:false,
				isCollction:false,
				isForward:false,
				likeflag:0,
				// likeToMove:false,
				// dislikeToMove:false
				commentList:[
					{
						comment_id:"1",
						commentable_id:"",
						user_id:"0",
						user_name:"哈哈哈哈",
						userType:"1",
						content:"wuyuwyuwyuwuwyuwyuywuyuwyuywuyuwyuwyuwyuywuyyyyyyyyyyyyyyyyyyyyywuyuwyuwyuwuwyuwyuywuyuwyuywuyuwyuwyuwyuywuyyyyyyyyyyyyyyyyyyyyywuyuwyuwyuwuwyuwyuywuyuwyuywuyuwyuwyuwyuywuyyyyyyyyyyyyyyyyyyyyywuyuwyuwyuwuwyuwyuywuyuwyuywuyuwyuwyuwyuywuyyyyyyyyyyyyyyyyyyyyy",
						vote_up_count:0,
						vote_up_Type:false,
						create_time:"2022-08-12",
					},
					{
						comment_id:"2",
						commentable_id:"",
						user_id:"0",
						user_name:"大鲨鲨",
						userType:"0",
						content:"无语无语",
						vote_up_count:1,
						vote_up_Type:false,
						create_time:"2022-08-12",
					},
					{
						comment_id:"3",
						commentable_id:"",
						user_id:"0",
						user_name:"小呆呆",
						userType:"0",
						content:"绝了绝了",
						vote_up_count:2,
						vote_up_Type:false,
						create_time:"2022-08-12",
					},
					{
						comment_id:"4",
						commentable_id:"1",
						user_id:"0",
						user_name:"小呆呆",
						userType:"0",
						content:"我也挺无语",
						vote_up_count:0,
						vote_up_Type:false,
						create_time:"2022-08-12",
					},
					{
						comment_id:"5",
						commentable_id:"3",
						user_id:"0",
						user_name:"霸气哥哥",
						userType:"0",
						content:"乌鱼子",
						vote_up_count:0,
						vote_up_Type:false,
						create_time:"2022-08-12",
					},
				]
			}
		},
		methods: {
			readOnlyChange() {
				this.readOnly = !this.readOnly
			},
			onEditorReady() {
				uni.createSelectorQuery().select('#editor').context((res) => {
					this.editorCtx = res.context
					// console.log(this.editorCtx.setContents());
							this.editorCtx.setContents({
							        delta: JSON.parse(this.articlAllInfo.contentMarkdown),
							        success(res){
									console.log(res);
									console.log("成功");
							}
						})
					console.log(res.context);

				}).exec()	
			},
			undo() {
				this.editorCtx.undo()
			},
			redo() {
				this.editorCtx.redo()
			},
			format(e) {
				let {
					name,
					value
				} = e.target.dataset
				if (!name) return
				// console.log('format', name, value)
				this.editorCtx.format(name, value)

			},
			onStatusChange(e) {
				const formats = e.detail
				this.formats = formats
			},
			insertDivider() {
				this.editorCtx.insertDivider({
					success: function() {
						console.log('insert divider success')
					}
				})
			},
			clear() {
				this.editorCtx.clear({
					success: function(res) {
						console.log("clear success")
					}
				})
			},
			removeFormat() {
				this.editorCtx.removeFormat()
			},
			insertDate() {
				const date = new Date()
				const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
				this.editorCtx.insertText({
					text: formatDate
				})
			},
			insertImage() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						this.editorCtx.insertImage({
							src: res.tempFilePaths[0],
							alt: '图像',
							success: function() {
								console.log('insert image success')
							}
						})
					}
				})
			},
			backLastPage(){
				uni.switchTab({
					url:"/pages/index/index"
				})
			},
			// 收藏
			collection(){
				this.isCollction = !this.isCollction
				if(this.isCollction==true){
					this.collectionNumber += 1
				}else{
					this.collectionNumber += -1
				}
			},
			
			// 点赞
			like(){
				this.isLike = !this.isLike
				// this.likeToMove = !this.likeToMove
				console.log(this.likeMove);
				if(this.isLike == true){
					this.isDisLike = false
					this.likeNumber += 1
					if(this.likeflag==2){
						this.disLikeNumber += -1
					}
					this.likeflag = 1
				}else{
					this.likeNumber += -1
					// this.disLikeNumber += 1
					this.likeflag = 0
				}
			},
			
			// 父评论点赞
			commentsLike(fatherKey){
				this.commentList[fatherKey].vote_up_Type = !this.commentList[fatherKey].vote_up_Type
				if(this.commentList[fatherKey].vote_up_Type==true){
					this.commentList[fatherKey].vote_up_count++
				}else{
					this.commentList[fatherKey].vote_up_count--
				}
			},
			
			// 子评论点赞
			commentsChildLike(fatherKey,childrenKey){
				// console.log("被触发");
				// console.log(fatherKey);
				// console.log(childrenKey);
				this.commentList[fatherKey].children[childrenKey].vote_up_Type = !this.commentList[fatherKey].children[childrenKey].vote_up_Type
				if(this.commentList[fatherKey].children[childrenKey].vote_up_Type==true){
					this.commentList[fatherKey].children[childrenKey].vote_up_count++
				}else{
					this.commentList[fatherKey].children[childrenKey].vote_up_count--
				}
				
				
			},
			
			// 踩
			dislike(){
				this.isDisLike = !this.isDisLike
				// this.dislikeToMove = !this.dislikeToMove
				if(this.isDisLike == true ){
					this.isLike = false
					this.disLikeNumber += 1
					if(this.likeflag==1){
						this.likeNumber += -1
					}			
					this.likeflag = 2
				}else{
					this.disLikeNumber += -1
					// this.likeNumber += 1
					this.likeflag = 0
				}
			},
			
			// 分享
			share(){
				this.isForward = !this.isForward
				if(this.isForward==true){
					this.forwardingNum += 1
				}else{
					this.forwardingNum += -1
				}
			},
			
			//弹出
			toggleMask(type) {
				this.$refs.ygcComment.toggleMask(type);
				// console.log("触发");
			},
			pubComment(commentContent1) {
				this.$refs.ygcComment.toggleMask();
				// console.log(commentContent1);
				this.commentContent = commentContent1;
				this.$refs.ygcComment.content = '';
			}
		},
		mounted(){
			this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
			// this.onEditorReady()
			// console.log(this.onEditorReady);
				// 将数据渲染到富文本内
				// console.log("组件加载");
				// console.log(this.articlAllInfo.contentMarkdown==undefined);
				// console.log(this.commentList.);
				
				// 将commentsList转换为简单的树结构
			// 	const tree = this.commentList.filter((father)=>{
			// 		const arr = this.commentList.filter((child) => {
			// 		    return father.comment_id == child.commentable_id
			// 		})
			// 		if (arr.length > 0) {
			// 		    father.children = arr
			// 		}
					
			// 		return father.parent == null
			// 	})
			// 	console.log(tree);
			// this.commentList = tree
			// console.log("在执行");;
			
			const data = this.commentList
			
			const  translateDataToTree = (data)=> {
			  //没有父节点的数据
			  let parents = data.filter(value => value.commentable_id == 'undefined' || value.commentable_id == null || value.commentable_id=="")
			 // console.log(parents);
			  //有父节点的数据
			  let children = data.filter(value => value.commentable_id !== 'undefined' && value.commentable_id != null && value.commentable_id != "")
			 
			  //定义转换方法的具体实现
			  let translator = (parents, children) => {
			    //遍历父节点数据
			    parents.forEach((parent) => {
			      //遍历子节点数据
			      children.forEach((current, index) => {
			        //此时找到父节点对应的一个子节点
			        if (current.commentable_id === parent.comment_id) {
			          //对子节点数据进行深复制，这里只支持部分类型的数据深复制，对深复制不了解的童靴可以先去了解下深复制
			          let temp = JSON.parse(JSON.stringify(children))
			          //让当前子节点从temp中移除，temp作为新的子节点数据，这里是为了让递归时，子节点的遍历次数更少，如果父子关系的层级越多，越有利
			          temp.splice(index, 1)
			          //让当前子节点作为唯一的父节点，去递归查找其对应的子节点
			          translator([current], temp)
			          //把找到子节点放入父节点的childrens属性中
			          typeof parent.children !== 'undefined' ? parent.children.push(current) : parent.children = [current]
			        }
			      }
			      )
			    }
			    )
			  }
			 
			  //调用转换方法
			  translator(parents, children)
			 
			  //返回最终的结果
			  return parents
			}
			
			this.commentList = translateDataToTree(data)
			
			 // console.log(); 
		  
		},
		onLoad(option) {
			// console.log("页面加载123");
			// console.log(option.articleInfo);
			this.articlAllInfo = JSON.parse( decodeURIComponent(option.articleInfo) )
			
			// this.articlAllInfo = JSON.parse(option)
			// console.log(typeof option.articleInfo);
		},
		onReady(){
			// console.log("准备好了");
			// console.log(this.editorCtx);
			
		},
		onNavigationBarButtonTap(e) {
			if(e.index == 1){
				// console.log("第一个按钮被触发了");
			}
			else if(e.index == 0){
				uni.navigateTo({
					url:"/pages/editor/editor-release/editor-release"
				})
			}
		},
		

	}
</script>

<style lang="scss" scoped>
	@import "./editor-icon.css";

	uni-image{
		height: 100%;
		width: 100%;
	}
	
	.page-body {
		height: calc(100vh - var(--window-top) - var(--status-bar-height));
	}

	.wrapper {
		height: 100%;
	}

	.editor-wrapper {
		/* height: calc(100vh - var(--window-top) - var(--status-bar-height) - 140px); */
		height: 100%;
		background: #fff;
	}
	
	#editor{
		height: 100%;
	}

	.iconfont {
		display: inline-block;
		padding: 8px 8px;
		width: 24px;
		height: 24px;
		cursor: pointer;
		font-size: 20px;
	}
/* 
	.toolbar {
		box-sizing: border-box;
		border-bottom: 0;
		font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
	}
 */

	.ql-container {
		box-sizing: border-box;
		padding: 12px 15px;
		width: 100%;
		min-height: 30vh;
		height: 100%;
		/* margin-top: 20px; */
		font-size: 16px;
		line-height: 1.5;
	}

	.ql-active {
		color: #1aa034;
	}
	
	.submit-btn{
		width: 100%;
		position: fixed;
		bottom: 0;
	}
	
	
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}
	
	
	.page-nav{
		position: sticky;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 44px;
		padding: 0 8px;
		
		.nav-left{
			display: flex;
			align-items: center;
			// background-color: black;
			.backBtn{
				// background-color: red;
				height: 50rpx;
				width: 50rpx;
			}	
			
			.authorInfo{
				display: flex;
				align-items: center;
				margin-left: 30rpx;
				// width: 70rpx;
				height: 100%;
				.authorProfilePicture{
					// height: 100%;
					// width: 100%;
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					overflow: hidden;
				}
				
				.authorText{
					margin-left: 20rpx;
					.authorName{
						font-size: 38rpx;
						font-weight: 600;
					}
					.authorMotto{
						font-size: 30rpx;
						color:#b7b7b7
					}
				}
			}
		}
		
		.nav-right{
			display: flex;
			align-items: center;
		}
		
	}
	
	
	.user-active{
		margin-top:40rpx ;
		height: 110rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		.acitve-item{
			display: flex;
			flex-direction: column;
			align-items: center;
			height: 100%;
			.img-box{
				width: 100%;
			}
			
			.text-box{
				width: 40rpx;
				text-align: center;
			}
		}
	}
	
	.comments-box{
		display: flex;
		justify-content: center;
		.comments-box-content{
			width: 90%;
			.comments-text{
				font-weight: 600;
				font-size: 40rpx;
			}
			
			.comments-user{
				display: flex;
				align-items: center;
				// justify-content: space-evenly;
				margin-top: 20rpx;
				.conments-userImg{
					display: flex;
					justify-content: center;
					height: 100%;
					width: 10%;
					.userImg-content{
						border-radius: 50%;
						overflow: hidden;
						width: 60rpx;
						height: 60rpx;
					}
				}
				
				.comments-click{
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: rgb(245, 245, 245);
					width: 85%;
					height: 60rpx;
					margin-left: 20rpx;
					border-radius: 50rpx;
					.comment-click-content{
						display: flex;
						align-items: center;
						width: 90%;
						height: 90%;
						font-weight: 600;
						font-size: 30rpx;
						color: rgb(157, 157, 157);
						
					}
				}
			}
		}
		
	}
	
	
	.comments-list{
		margin-top: 55rpx;
		.comments-list-item{
			display: flex;
			// flex-direction: column;
			margin-bottom: 30rpx;
			.item-userImg{
				width: 10%;
				.userImg-box{
					width: 70rpx;
					height: 70rpx;
					border-radius: 50%;
					overflow: hidden;
				}
			}
			
			.item-content{
				margin-left: 20rpx;
				// display: flex;
				width: 100%;
				.item-userInfo{
					display: flex;
					justify-content: space-between;
					width: 100%;
					height: 30rpx;
					margin-bottom: 10rpx;
					.item-userInfo-userName{
						display: flex;
						font-weight: 600;
						font-size: 28rpx;
						color: rgb(165, 165, 165);
						.userType{
							height: 100%;
							display: flex;
							justify-content: center;
							margin-left: 10rpx;
							.userType-content{
								border-radius: 5rpx;
								background-color: rgb(245, 245, 245);
								font-size: 10rpx;
							}
						}
					}
					
					.item-userInfo-like{
						display: flex;
						justify-content: center;
						align-items: center;
						width: 6%;
						.img-box{
							width: 90%;
							text-align: center;
						}
					}
				}
				
				.item-userText{
					// margin-top: -30rpx;
					width: 80%;
					white-space: normal;  // 规定段落中的文本不进行换行
					word-break: break-all;  // 允许单词中换行，在容器的最右边进行断开不会浪费控件
					word-wrap: break-word;  // 防止长单词溢出，单词内部短句
				}
				
				.item-send-time{
					color: rgb(157, 157, 157);
					margin-top: 5rpx;
					font-size: 25rpx;
					font-weight: 600;
				}
			}
		}
	}
	
	
	
	
	.like-active{
		animation: likeMove .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	}
	
	.dislike-active{
		animation: dislikeMove .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	}
	
	.collection-active{
		animation: collectionMove 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
	}
	
	.share-active{
		animation: shareMove .8s ease-in;
	}
	@keyframes likeMove{
		0%{	
		}
		40%{
			transform: rotate(-50deg);
		}
		80%{
			transform: rotate(30deg);
		}
		100%{
			transform: rotate(0deg);
		}
	}
	
	@keyframes dislikeMove{
		0%{	
		}
		40%{
			transform: rotate(-50deg);
		}
		80%{
			transform: rotate(30deg);
		}
		100%{
			transform: rotate(0deg);
		}
	}
	
	@keyframes collectionMove{
		0%{
		
			transform: scale(1);
		}
		40%{
			transform: scale(0);	
		}
		100%{
			transform: scale(1);
		}
	}
	
	@keyframes shareMove{
		0%{
			
		}
		
		20%{
			transform: translate(-1rem,1rem);
		}
		
		50%{
			transform: translate(3rem,-3rem);
			opacity: 0
		}
		
		100%{
			opacity: 0
		}
	}
</style>
